<template>
  <div class="main-warp">
    <dv-border-box-7 style="width:100%;padding:25px;">
      <div class="head">
        <i class="iconfont icon-zhexiantu-"></i>
        <div class="title">全省理政趋势图</div>
      </div>
      <div class="content">
        <Echart :options="options" height="225px"/>
      </div>
      <div class="head" style="margin-top:10px;position: relative">
        <i class="iconfont icon-source"></i>
        <div class="title">来源分布图</div>
      </div>
      <div class="content">
        <Echart :options="fenbu" height="265px"/>
      </div>

      <div class="head" style="margin-top:30px;position: relative">
        <i class="iconfont icon-remen"></i>
        <div class="title">热门关键词</div>
      </div>
      <Wordcloud/>
    </dv-border-box-7>
  </div>
</template>
<script>
import Echart from "../../common/echart";
import Wordcloud from '../../components/common/Wordcloud'
export default {
  components: {Echart,Wordcloud},
  name: 'newData',
  data() {
    return {
      options: [],
      fenbuData: [
        {
          name: 'PC',
          value: 55
        },
        {
          name: 'WAP',
          value: 120
        },
        {
          name: '小程序 ',
          value: 171
        },
      ]
    }
  },
  created() {
    this.init()
  }
  ,
  methods: {
    init() {

      this.options = {
        legend: {
          showSymbol: false,
          top: 20,
          data: [
            {
              name: '收到量',
              itemStyle: {opacity: 0},
              lineStyle: {
                color: '#6f88a2'
              }
            },
            {
              name: '办结量',
              itemStyle: {opacity: 0},
              lineStyle: {
                color: '#c0adfb'
              }
            },
            {
              name: '按时办结',
              itemStyle: {opacity: 0},
              lineStyle: {
                color: '#adfbd7'
              }
            },
            {
              name: '满意度',
              itemStyle: {opacity: 0},
              lineStyle: {
                color: '#bf7d7d'
              }
            }
          ]
        },
        xAxis: {
          type: 'category',
          data: ['10月', '11月', '12月', '1月', '2月', '3月'],
          boundaryGap: false,
          axisLabel: {
            margin: 35
          },
          axisLine: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: '收到量',
            data: [18, 22, 32, 14, 52, 61],
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: '#6f88a2'
            }
          },
          {
            name: '办结量',
            data: [6, 5, 5, 3, 2, 1],
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: '#c0adfb'
            }
          },
          {
            name: '按时办结',
            data: [16, 52, 15, 33, 12, 10],
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: '#adfbd7'
            }
          },
          {
            name: '满意度',
            data: [126, 152, 145, 133, 142, 110],
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: '#bf7d7d'
            }
          }
        ]
      };

      this.fenbu = {
        legend: {
          showSymbol: false,
          top: 20,
          data: ['PC','WAP','小程序']
        },
        tooltip:{
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '70px',
          left: '30px', //默认10%
          right: '30px', //默认10%
          bottom: '10px', //默认60
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['10月','11月','12月','1月', '2月', '3月'],
          axisLine: {
            show: false
          },
          boundaryGap: false,
          axisLabel: {
            margin: 20
          },
        },
        barWidth:4,

        yAxis: {
          type: 'value',
          boundaryGap: false,
          axisLabel: {
            show: false,
          },

          axisLine: {
            show: false
          }
        },
        emphasis: {
          itemStyle: {
            color: 'rgba(210,210,210,.6)',
          },
        },
        series: [
          {
            name:'PC',
            data: [10, 200, 150,100,100,100],
            type: 'bar',
            barGap: '2',
            itemStyle: {
                barBorderRadius: [30, 30, 0, 0]
            },
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 0,
                  color: 'rgba(210,210,210,0)',
                },
                {
                  offset: .5,
                  color: 'rgba(210,210,210,.3)',
                },
                {
                  offset: 1,
                  color: 'rgba(210,210,210,1)',
                },
              ],
              global: false // 缺省为 false
            }
          },
          {
            name:'WAP',
            data: [120, 300, 150,100,100,100],
            itemStyle: {
              barBorderRadius: [30, 30, 0, 0] // [左上角, 右上角, 右下角, 左下角]
            },
            type: 'bar',
            color: {
              type: 'linear',
              // x=0,y=1,柱子的颜色在垂直方向渐变
              x: 0,
              y: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 0,
                  color: 'rgba(110,121,153,0)',
                },
                // 100%处的颜色
                {
                  offset: .5,
                  color: 'rgba(110,121,153,1)',
                },
                // 100%处的颜色
                {
                  offset: 1,
                  color: 'rgba(110,121,153,1)',
                },
              ],
              global: false // 缺省为 false
            }
          },
          {
            name:'小程序',
            itemStyle: {
              barBorderRadius: [30, 30, 0, 0] // [左上角, 右上角, 右下角, 左下角]
            },
            data: [120, 200, 150,100,100,100],
            type: 'bar',
            color: {
              type: 'linear',
              // x=0,y=1,柱子的颜色在垂直方向渐变
              x: 0,
              y: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 0,
                  color: 'rgba(116,110,163,0)',
                },
                {
                  offset: .5,
                  color: 'rgba(116,110,163,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(116,110,163,1)',
                },
              ],
              global: false // 缺省为 false
            }
          },
        ]
      };
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/thread.scss';
</style>
